<template>
  <q-page class="analysis-container q-pa-md">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="text-h5 text-weight-bold q-mb-md text-primary">
        <q-icon name="warning" size="sm" class="q-mr-sm"/>
        诊断分析
      </div>
      <q-card flat bordered class="search-card">
        <q-card-section>
          <q-form @submit.prevent="search" class="search-form">
            <q-select
              v-model="line_name"
              :options="filteredLineOptions"
              label="线路名称"
              filled
              use-input
              hide-selected
              fill-input
              input-debounce="0"
              class="search-input"
              bg-color="white"
              hint="请输入或选择线路名称"
              @filter="filterLineOptions"
              @input-value="setModel"
            >
              <template v-slot:prepend>
                <q-icon name="electric_bolt" />
              </template>
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    没有找到匹配的线路
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
            
            <q-input
              v-model="target_distance_km"
              label="测距距离(km)"
              filled
              type="number"
              step="0.0001"
              class="search-input"
              bg-color="white"
              hint="请输入测距距离，单位km"
            >
              <template v-slot:prepend>
                <q-icon name="straighten" />
              </template>
            </q-input>
            
            <q-btn
              type="submit"
              label="开始分析"
              color="primary"
              class="search-btn"
              icon="search"
              :disable="!line_name || !target_distance_km"
            />
          </q-form>
        </q-card-section>
      </q-card>
    </div>

    <!-- 告警业务标签区域 -->
    <div v-if="queries.length" class="alert-section q-mt-md">
      <q-card flat bordered>
        <q-card-section>
          <div class="text-h6 text-weight-bold q-mb-md">
            <q-icon name="error_outline" size="sm" class="q-mr-sm"/>
            告警业务
          </div>
          <div class="alert-chips">
            <q-chip
              v-for="(query, index) in queries"
              :key="index"
              removable
              @remove="removeQuery(index)"
              class="alert-chip"
              color="negative"
              text-color="white"
            >
              {{ query }}
            </q-chip>
          </div>
        </q-card-section>
      </q-card>
    </div>

    <!-- 诊断结果区域 -->
    <div v-if="result" class="result-section q-mt-md">
      <!-- <q-card flat bordered>
        <q-card-section>
          <div class="text-h6 text-weight-bold">
            <q-icon name="assessment" size="sm" class="q-mr-sm"/>
            故障定位诊断结果
          </div>
          <p class="text-grey-8">{{ result }}</p>
        </q-card-section>
      </q-card> -->

      <q-card flat bordered class="q-mt-md">
        <q-card-section>
          <div class="text-h6 text-weight-bold">
            <q-icon name="insights" size="sm" class="q-mr-sm"/>
            当前诊断结果
          </div>
          
          <!-- 将JSON展示改为表格形式 -->
          <div class="q-pa-md">
            <!-- 测距定位信息表 -->
            <q-card flat bordered class="q-mb-md">
              <q-card-section class="bg-blue-1">
                <div class="text-subtitle1 text-weight-bold">测距定位信息</div>
              </q-card-section>
              
              <q-markup-table flat bordered>
                <tbody>
                  <tr>
                    <td class="text-weight-bold bg-grey-2" style="width: 200px">测量距离(km)</td>
                    <td>{{ locationInfo ? locationInfo.distance : '-' }}</td>
                  </tr>
                </tbody>
              </q-markup-table>
              
              <!-- 落点区段信息 -->
              <q-card-section class="bg-grey-2 q-py-sm">
                <div class="text-subtitle2 text-weight-bold">落点区段信息</div>
              </q-card-section>
              
              <q-tabs
                v-model="poleTab"
                dense
                class="text-grey"
                active-color="primary"
                indicator-color="primary"
                align="left"
                narrow-indicator
              >
                <q-tab name="前杆" label="前一个杆塔" />
                <q-tab name="后杆" label="后一个杆塔" />
              </q-tabs>

              <q-tab-panels v-model="poleTab" animated>
                <q-tab-panel name="前杆">
                  <q-markup-table flat bordered v-if="locationInfo && Object.keys(locationInfo.frontPole).length > 0">
                    <tbody>
                      <tr>
                        <td class="text-weight-bold bg-grey-2" style="width: 200px">坐标</td>
                        <td>{{ locationInfo.frontPole['坐标'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">杆塔名称</td>
                        <td>{{ locationInfo.frontPole['杆塔名称'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">导线型号</td>
                        <td>{{ locationInfo.frontPole['设备型号'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">杆塔型号</td>
                        <td>{{ locationInfo.frontPole['杆塔型号'] || '-' }}</td>
                      </tr>
                    </tbody>
                  </q-markup-table>
                  <div class="text-center q-pa-md text-grey" v-else>暂无前一个杆塔信息</div>
                </q-tab-panel>
                
                <q-tab-panel name="后杆">
                  <q-markup-table flat bordered v-if="locationInfo && Object.keys(locationInfo.backPole).length > 0">
                    <tbody>
                      <tr>
                        <td class="text-weight-bold bg-grey-2" style="width: 200px">坐标</td>
                        <td>{{ locationInfo.backPole['坐标'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">杆塔名称</td>
                        <td>{{ locationInfo.backPole['杆塔名称'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">导线型号</td>
                        <td>{{ locationInfo.backPole['设备型号'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">杆塔型号</td>
                        <td>{{ locationInfo.backPole['杆塔型号'] || '-' }}</td>
                      </tr>
                    </tbody>
                  </q-markup-table>
                  <div class="text-center q-pa-md text-grey" v-else>暂无后一个杆塔信息</div>
                </q-tab-panel>
              </q-tab-panels>
          <div class="text-right q-mt-md">
            <q-btn
              color="warning"
              icon="map"
              label="地图显示"
              @click="goToGasMap"
              class="action-btn q-mr-md"
            />
            <!-- <q-btn
              color="grey"
              icon="arrow_forward"
              label="进入影响范围预警"
              @click="goToFaultPrediction"
              class="action-btn"
              disable
            /> -->
          </div>
            </q-card>
            
            <!-- 线路信息表 -->
            <q-card flat bordered>
              <q-card-section class="bg-blue-1">
                <div class="text-subtitle1 text-weight-bold">线路信息</div>
              </q-card-section>
              
              <q-markup-table flat bordered>
                <tbody>
                  <tr>
                    <td class="text-weight-bold bg-grey-2" style="width: 200px">总长度(km)</td>
                    <td>{{ lineInfo ? lineInfo.length : '-' }}</td>
                  </tr>
                  <tr>
                    <td class="text-weight-bold bg-grey-2">杆塔数量</td>
                    <td>{{ lineInfo ? lineInfo.poleCount : '-' }}</td>
                  </tr>
                  <tr>
                    <td class="text-weight-bold bg-grey-2">线路名称</td>
                    <td>{{ lineInfo ? lineInfo.name : '-' }}</td>
                  </tr>
                </tbody>
              </q-markup-table>
              
              <q-tabs
                v-model="lineTab"
                dense
                class="text-grey"
                active-color="primary"
                indicator-color="primary"
                align="left"
                narrow-indicator
              >
                <q-tab name="起始杆塔" label="起始杆塔" />
                <q-tab name="终止杆塔" label="终止杆塔" />
              </q-tabs>

              <q-tab-panels v-model="lineTab" animated>
                <q-tab-panel name="终止杆塔">
                  <q-markup-table flat bordered v-if="lineInfo && Object.keys(lineInfo.linePole).length > 0">
                    <tbody>
                      <tr>
                        <td class="text-weight-bold bg-grey-2" style="width: 200px">坐标</td>
                        <td>{{ lineInfo.linePole['坐标'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">杆塔名称</td>
                        <td>{{ lineInfo.linePole['杆塔名称'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">导线型号</td>
                        <td>{{ lineInfo.linePole['设备型号'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">杆塔型号</td>
                        <td>{{ lineInfo.linePole['杆塔型号'] || '-' }}</td>
                      </tr>
                    </tbody>
                  </q-markup-table>
                  <div class="text-center q-pa-md text-grey" v-else>暂无线上杆塔信息</div>
                </q-tab-panel>
                
                <q-tab-panel name="起始杆塔">
                  <q-markup-table flat bordered v-if="lineInfo && Object.keys(lineInfo.startPole).length > 0">
                    <tbody>
                      <tr>
                        <td class="text-weight-bold bg-grey-2" style="width: 200px">坐标</td>
                        <td>{{ lineInfo.startPole['坐标'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">杆塔名称</td>
                        <td>{{ lineInfo.startPole['杆塔名称'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">导线型号</td>
                        <td>{{ lineInfo.startPole['设备型号'] || '-' }}</td>
                      </tr>
                      <tr>
                        <td class="text-weight-bold bg-grey-2">杆塔型号</td>
                        <td>{{ lineInfo.startPole['杆塔型号'] || '-' }}</td>
                      </tr>
                    </tbody>
                  </q-markup-table>
                  <div class="text-center q-pa-md text-grey" v-else>暂无起始杆塔信息</div>
                </q-tab-panel>
              </q-tab-panels>
            </q-card>
          </div>

          <!-- 添加跳转按钮 -->
          <div class="text-right q-mt-md">
            <!-- <q-btn
              color="warning"
              icon="map"
              label="进入地图预警"
              @click="goToGasMap"
              class="action-btn q-mr-md"
            /> -->
            <!-- <q-btn
              color="grey"
              icon="arrow_forward"
              label="进入影响范围预警"
              @click="goToFaultPrediction"
              class="action-btn"
              disable
            /> -->
          </div>
        </q-card-section>
      </q-card>
    </div>
  </q-page>
</template>

<script>
import axios from 'axios';
import { Dialog, Loading } from 'quasar';
export default {
  name: 'EsAnaCon',
  data() {
    return {
      formattedJson: [
        { "所属光缆": "光缆1", "数量": 10 },
        { "所属光缆": "光缆2", "数量": 15 }
      ],
      queryInput: '',
      line_name: '',
      target_distance_km: '',
      queries: [],
      result: '',
      poleTab: '前杆',
      lineTab: '线上杆塔',
      lineOptions: [],
      filteredLineOptions: []
    };
  },
  methods: {
    addQuery() {
      if (this.queryInput) {
        this.queries.push(this.queryInput);
        this.queryInput = '';
        // this.search();
      }
    },
    removeQuery(index) {
      this.queries.splice(index, 1);

      // 检查 this.queries 是否为空
      if (this.queries.length === 0) {
        localStorage.setItem('queryResult', '[]');
      } else {
        this.search();  // 如果不为空，执行搜索
      }
    },
    async search_bak() {
      try {
        // 发送 GET 请求并等待响应
        const response = await axios.get('http://1.95.80.5:4444/get_xiangtongyongtu_names', {
          params: { items_yw: JSON.stringify(this.queries) }
        });

        const responseData = response.data;

        // 提取"所属光缆"字段的值
        const extractedCables = responseData.map(item => item['所属光缆段']);

        console.log('extractedCables',extractedCables);
        // 从 LocalStorage 获取 queryResult
        const storedQueryResult = JSON.parse(localStorage.getItem('queryResult')) || [];
        console.log('storedQueryResult',storedQueryResult)
        // 检查新数组与 LocalStorage 的对比
        const allCablesContained = extractedCables.every(cable => storedQueryResult.includes(cable));

        console.log("all",allCablesContained);
        if (allCablesContained || storedQueryResult.length === 0) {
          // 更新 LocalStorage
          localStorage.setItem('queryResult', JSON.stringify(extractedCables));
        } else {
          // 输出错误信息并移除最后一个输入
          this.showAlert('经过分析当前务无法关联到相同的光缆段，请重新输入其他报错业务；');
          this.queries.pop();  // 移除最后一个输入
          this.result = '经过分析当前业务无法关联到相同的光缆段，请重新输入其他报错业务；';
          return; // 退出方法
        }
        console.log("所属光缆",responseData)

        // 处理成功情况
        const processedData = responseData.map(item => ({
          "所属光缆段": item['所属光缆段'],
          "故障分析值": item['数量'],
          "所属光缆": item['光缆-光路-业务'][0]['所属光缆'],
        }));
        processedData.sort((a, b) => b.故障分析值 - a.故障分析值);
        this.formattedJson = processedData

        // 将处理后的数据数组转换为JSON字符串并展示
        this.result = `当前诊断结果: ${JSON.stringify(processedData)}`;
        localStorage.setItem('渲染', JSON.stringify(responseData));
        localStorage.setItem('链路', JSON.stringify(processedData));

        return ;
      } catch (error) {
        // 处理错误情况
        console.error('Error fetching data:', error);
        this.result = '查询失败';
      }
    },
    async search() {
      Loading.show();
      try {
        // 创建请求参数
        const params = {
          line_name: this.line_name,
          target_distance_km: parseFloat(this.target_distance_km)
        };

        // 发送 POST 请求并等待响应
        const response = await axios.post('http://1.95.80.5:5000/gis_ana_query', params);

        const responseData = response.data;

        this.formattedJson = responseData;
        // 打印数据结构以进行调试
        console.log('API响应数据结构:', JSON.stringify(responseData, null, 2));
        this.result = `当前诊断结果: ${JSON.stringify(responseData)}`;

        // 更新localStorage
        localStorage.setItem('渲染', JSON.stringify(responseData));
        localStorage.setItem('链路', JSON.stringify(responseData));

        // 保存当前分析结果到localStorage
        localStorage.setItem('previousResult', JSON.stringify(this.result));
        localStorage.setItem('previousFormattedJson', JSON.stringify(this.formattedJson));
        
        // 保存当前查询参数
        localStorage.setItem('previousLineParams', JSON.stringify({
          line_name: this.line_name,
          target_distance_km: this.target_distance_km
        }));

      } catch (error) {
        // 处理错误情况
        console.error('Error fetching data:', error);
        this.result = '分析失败，请检查输入参数是否正确';
        this.showAlert('分析失败，请检查输入参数是否正确');
      } finally {
        Loading.hide();
      }
    },
    showAlert(message) {
      this.$q.dialog({
        title: '告警',
        message: message,
        ok: true,
        cancel: false,
      }).onOk(() => {
        // 确认后可以执行的操作
        console.log('用户已确认');
      });
    },
    // 添加跳转方法
    goToFaultPrediction() {
      // 保存当前分析结果到 localStorage
      localStorage.setItem('链路', JSON.stringify(this.formattedJson));

      // 使用路由导航到故障范围预测页面
      this.$router.push('/FaultResultQuery');
    },
    goToGasMap() {
      // 保存当前分析结果到 localStorage
      this.$router.push('/gis');
      console.log("进入地图")
      console.log(this.formattedJson)
      // 找到故障分析值最大的记录
      const maxItem = this.formattedJson.reduce((max, current) => {
        return current["故障分析值"] > max["故障分析值"] ? current : max;
      }, this.formattedJson[0]);

      console.log("maxItem",maxItem)
      console.log("formattedJson",this.formattedJson)

      // 只保留最大值的记录
      this.formattedJson = [maxItem];
      const jsonStr = this.formattedJson[0]['所属光缆段'];
      const matches = jsonStr.match(/\((.*?)\)/);
      const extractedStr = matches ? matches[1] : jsonStr;
      console.log(extractedStr)
      console.log("111111111")
      console.log(this.formattedJson[0]['所属光缆段'])
      let retjson = [{"所属光缆":extractedStr}]
      console.log(retjson)
      localStorage.setItem('alertInfo', extractedStr);

      // 使用路由导航到故障范围预测页面
      this.$router.push('/gas');
    },
    async fetchLineOptions() {
      try {
        // 使用Elasticsearch SQL API查询
        const sqlQuery = 'SELECT "所属线路_x" FROM "tonghua_gis" GROUP BY "所属线路_x"';
        
        // 发送SQL查询请求到Elasticsearch
        const response = await axios.post('http://1.95.80.5:9002/_sql?format=json', {
          query: sqlQuery,
        }, {
          auth: {
            username: 'admin',
            password: '1992A1573'
          },
          headers: {
            'Content-Type': 'application/json'
          }
        });

        // 处理响应数据
        if (response.data && response.data.rows) {
          // 提取所属线路_x字段的值
          this.lineOptions = response.data.rows.map(row => row[0]).filter(item => item !== null && item !== undefined);
          
          // 初始化过滤选项（显示前20个）
          this.filteredLineOptions = this.lineOptions.slice(0, 20);
          
          // 打印结果
          console.log('所属线路_x 数组:', this.lineOptions);
          console.log('查询到的线路数量:', this.lineOptions.length);
          
          // 如果需要存储到localStorage
          localStorage.setItem('availableLines', JSON.stringify(this.lineOptions));
          
        } else {
          console.warn('未获取到有效的线路数据');
        }
        
      } catch (error) {
        console.error('查询线路数据失败:', error);
        
        // 如果直接SQL查询失败，尝试使用聚合查询的方式
        try {
          const aggregationResponse = await axios.post('http://1.95.80.5:9200/tonghua_gis/_search', {
            size: 0,
            aggs: {
              unique_lines: {
                terms: {
                  field: "所属线路_x.keyword",
                  size: 10000
                }
              }
            }
          }, {
            headers: {
              'Content-Type': 'application/json'
            }
          });

          if (aggregationResponse.data && aggregationResponse.data.aggregations) {
            const buckets = aggregationResponse.data.aggregations.unique_lines.buckets;
            this.lineOptions = buckets.map(bucket => bucket.key);
            
            // 初始化过滤选项（显示前20个）
            this.filteredLineOptions = this.lineOptions.slice(0, 20);
            
            console.log('所属线路_x 数组 (通过聚合查询):', this.lineOptions);
            console.log('查询到的线路数量:', this.lineOptions.length);
            
            localStorage.setItem('availableLines', JSON.stringify(this.lineOptions));
          }
          
        } catch (aggError) {
          console.error('聚合查询也失败:', aggError);
          this.lineOptions = [];
          this.filteredLineOptions = [];
        }
      }
    },
    filterLineOptions(val, update, abort) {
      if (val === '') {
        update(() => {
          this.filteredLineOptions = this.lineOptions.slice(0, 20); // 限制显示前20个选项
        });
        return;
      }

      update(() => {
        const needle = val.toLowerCase();
        this.filteredLineOptions = this.lineOptions.filter(v => 
          v.toLowerCase().indexOf(needle) > -1
        );
      });
    },
    setModel(val) {
      this.line_name = val;
    }
  },
  async mounted() {
    // 移除清空操作
    localStorage.setItem('queryResult','[]')

    Loading.show();
    
    try {
      // 首先执行线路数据查询
      await this.fetchLineOptions();
      
      // 从 localStorage 获取之前的查询结果
      const previousQueries = JSON.parse(localStorage.getItem('previousQueries') || '[]');
      const previousResult = JSON.parse(localStorage.getItem('previousResult') || '');
      const previousFormattedJson = JSON.parse(localStorage.getItem('previousFormattedJson') || '[]');
      const previousLineParams = JSON.parse(localStorage.getItem('previousLineParams') || '{}');

      // 恢复之前的查询参数
      if (previousLineParams) {
        this.line_name = previousLineParams.line_name || '';
        this.target_distance_km = previousLineParams.target_distance_km || '';
      }

      // 恢复之前的查询状态
      if (previousQueries.length > 0) {
        this.queries = previousQueries;
        this.result = previousResult;
        this.formattedJson = previousFormattedJson;
        
        // 打印恢复的数据结构，辅助调试
        console.log('恢复的数据结构:', JSON.stringify(this.formattedJson, null, 2));
        
        // 尝试检测实际数据中的键名
        if (this.formattedJson) {
          console.log('顶层键:', Object.keys(this.formattedJson));
          
          if (this.formattedJson['测距定位']) {
            console.log('测距定位的键:', Object.keys(this.formattedJson['测距定位']));
          }
          
          if (this.formattedJson['线路信息']) {
            console.log('线路信息的键:', Object.keys(this.formattedJson['线路信息']));
          }
        }
      }
    } catch (error) {
      console.error('组件初始化失败:', error);
    } finally {
      Loading.hide();
    }
  },
  computed: {
    nameQuery() {
      return {
        "size": 0,
        "aggs": { "group_by_field": { "terms": { "field": "名称.keyword" } } }
      }
    },
    levelQuery() {
      return {
        "size": 0,
        "aggs": { "group_by_field": { "terms": { "field": "网元类型.keyword" } } }
      }
    },
    businessQuery() {
      return {
        "size": 0,
        "aggs": { "group_by_field": { "terms": { "field": "告警类型.keyword" } } }
      }
    },
    // 处理测距定位信息
    locationInfo() {
      if (!this.formattedJson) return null;
      
      // 检查是否为对象类型
      if (typeof this.formattedJson !== 'object') return null;
      
      // 尝试获取测距定位信息
      const distanceInfo = this.formattedJson['故障定位'];
      if (!distanceInfo) return null;
      
      return {
        // 尝试不同可能的键名获取距离值
        distance: distanceInfo['测量距离km'] || distanceInfo['测量距离_km'] || distanceInfo['测量距离'] || '-',
        // 获取落点区段信息
        dropSection: distanceInfo['落点区段'] || {},
        // 尝试获取前一个杆塔信息
        frontPole: ((distanceInfo['落点区段'] || {})['前一个杆塔']) || {},
        // 尝试获取后一个杆塔信息
        backPole: ((distanceInfo['落点区段'] || {})['后一个杆塔']) || {}
      };
    },
    // 处理线路信息
    lineInfo() {
      if (!this.formattedJson) return null;
      // 检查是否为对象类型
      if (typeof this.formattedJson !== 'object') return null;
      
      // 尝试获取线路信息
      const lineData = this.formattedJson['线路信息'];
      if (!lineData) return null;
      
      return {
        // 尝试不同可能的键名获取长度值
        length: lineData['总长度_km'] || lineData['总长度km'] || lineData['总长度'] || '-',
        // 获取杆塔数量
        poleCount: lineData['杆塔数量'] || '-',
        // 获取线路名称
        name: lineData['线路名称'] || '-',
        // 获取线上杆塔信息
        linePole: lineData['终止杆塔'] || {},
        // 获取起始杆塔信息
        startPole: lineData['起始杆塔'] || {}
      };
    }
  },
};
</script>
<style scoped>
.analysis-container {
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  min-height: 100vh;
}

.search-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.search-card {
  background: white;
}

.search-form {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.search-input {
  flex: 1;
  max-width: 500px;
}

.search-btn {
  margin-top: 4px;
  min-width: 120px;
  border-radius: 8px;
}

.alert-section, .result-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.alert-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.alert-chip {
  transition: all 0.3s ease;
}

.alert-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.diagnosis-result {
  background-color: white;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #495057;
}

/* 表格样式 */
.q-markup-table {
  width: 100%;
}

.q-markup-table td {
  padding: 12px 16px;
}

.q-card {
  transition: all 0.3s ease;
}

.q-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.bg-blue-1 {
  background-color: #e3f2fd;
}

.bg-grey-2 {
  background-color: #f5f5f5;
}

.text-subtitle1 {
  font-size: 1.1rem;
}

.text-subtitle2 {
  font-size: 1rem;
}

.q-tab-panels {
  background-color: white;
}

.q-tab {
  padding: 8px 16px;
}

/* 响应式布局 */
@media (max-width: 600px) {
  .search-form {
    flex-direction: column;
  }

  .search-input {
    max-width: 100%;
  }

  .search-btn {
    width: 100%;
    margin-top: 16px;
  }
}

.action-btn {
  min-width: 180px;
  border-radius: 8px;
  font-weight: 500;
  text-transform: none;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateX(5px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>

